<template>
  <div class="detail-container">
    <st-sections title="基本信息" style="margin: 10px 10px 0 10px;">
      <el-descriptions  style="margin: 10px 10px 0 10px;" :column="2" size="medium">
        <el-descriptions-item v-for="item in baseItems" :label="item.lable" >
          {{customerForm[item.name]}}
        </el-descriptions-item>
      </el-descriptions>
    </st-sections>
    <st-sections title="系统信息" style="margin: 10px 10px 0 10px;">
      <el-descriptions style="margin: 10px 10px 0 10px;" :column="2" size='medium'>
        <el-descriptions-item v-for="item in systemItems" :label="item.lable">
          {{customerForm[item.name]}}
        </el-descriptions-item>
      </el-descriptions>
    </st-sections>
  </div>
</template>
<script>
export default {
  props:{
    customerForm:{
      type:Object,
      default:function() {
        return {};
      }
    }
  },
  data(){
    return{
      baseItems:[
        {
          'lable':'客户名称',
          'name':'customerName'
        },
        {
          'lable':'客户性质',
          'name':'natureDisp'
        },
        {
          'lable':'客户来源',
          'name':'sourceDisp'
        },
        {
          lable:'客户行业',
          name:'industryDisp'
        },
        {
          lable:'客户分级',
          name:'gradeDisp'
        },
        {
          lable:'客户阶段',
          name:'stageDisp'
        },
        {
          lable:'客户官网',
          name:'website'
        },
        {
          lable:'客户类型',
          name:'typeDisp'
        },
        {
          lable:'客户简介',
          name:'introduction'
        },
        {
          lable:'详细地址',
          name:'address'
        },
        {
          lable:'销售负责人',
          name:'ownerUserId'
        },
        {
          lable:'售后负责人',
          name:'saUserId'
        },
        {
          lable:'下次联系时间',
          name:'nextContactTime'
        }
      ],
      systemItems:[
        {
          lable:'创建人',
          name:'createdBy'
        },
        {
          lable:'创建时间',
          name:'createdTime'
        },
        {
          lable:'更新人',
          name:'updatedBy'
        },
        {
          lable:'更新时间',
          name:'updatedTime'
        }
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.detail-container{
  height: calc(100vh - 273px);
  overflow: auto;
}

::v-deep .el-descriptions--medium:not(.is-bordered) .el-descriptions-item__cell{
  padding-bottom: 20px;
}
</style>
